<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var datakun = [
    [1,2],
    [2,4],
    [3,5],
    [4,1],
    [5,1],
    [6,2],
    [7,1],
    [8,7],
    [9,0],
    [10,0],
    [11,0],
    [12,0]
];

var datafa = [
    [1,0],
    [2,9],
    [3,1],
    [4,4],
    [5,9],
    [6,5],
    [7,5],
    [8,5],
    [9,9],
    [10,5],
    [11,7],
    [12,2]
];

var datajuan = [
    [1,5],
    [2,4],
    [3,3],
    [4,3],
    [5,3],
    [6,3],
    [7,4],
    [8,3],
    [9,1],
    [10,1],
    [11,0],
    [12,0]
];

var schema = [
    {name: 'chapter', index: 0, text: '章节'},
    {name: 'number', index: 1, text: '数量'}
];


var itemStyle = {
    normal: {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
};

option = {
    backgroundColor: '#404a59',
    color: [
        '#dd4444', '#fec42c', '#80F1BE'
    ],
    legend: {
        y: 'top',
        data: ['困', '乏', '倦'],
        textStyle: {
            color: '#fff',
            fontSize: 16
        }
    },
    grid: {
        x: '10%',
        x2: '20%',
        y: '18%',
        y2: '10%'
    },
    tooltip: {
        padding: 10,
        backgroundColor: '#222',
        borderColor: '#777',
        borderWidth: 1,
        formatter: function (obj) {
            var value = obj.value;
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + obj.seriesName + '：'
                + '</div>'
                +'第' + value[0]+ '组'+ '：'
                + '</div>'
                + value[1] + '<br>';
        }
    },
    xAxis: {
        type: 'value',
        name: '组(每10个章节为一组)',
        nameGap: 16,
        nameTextStyle: {
            color: '#fff',
            fontSize: 14
        },
        max: 12,
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#eee'
            }
        }
    },
    yAxis: {
        type: 'value',
        name: '字出现的频数',
        nameLocation: 'end',
        nameGap: 20,
        nameTextStyle: {
            color: '#fff',
            fontSize: 16
        },
        axisLine: {
            lineStyle: {
                color: '#eee'
            }
        },
        splitLine: {
            show: false
        }
    },
    visualMap: [
        {
            right: 20,
            top: '10%',
            min: -1,
            max: 11,
            itemWidth: 20,
            itemHeight: 50,
            calculable: true,
            precision: 0.1,
            text: ['圆形大小：频数大小'],
            textGap: 30,
            textStyle: {
                color: '#fff'
            },
            inRange: {
                symbolSize: 16
            },
            outOfRange: {
                symbolSize: 16,
                color: ['rgba(255,255,255,.2)']
            },
            controller: {
                inRange: {
                    color: ['#c23531']
                },
                outOfRange: {
                    color: ['#444']
                }
            }
        }
    ],
    series: [
        {
            name: '困',
            type: 'scatter',
            itemStyle: itemStyle,
            data: datakun
        },
        {
            name: '乏',
            type: 'scatter',
            itemStyle: itemStyle,
            data: datafa
        },
        {
            name: '倦',
            type: 'scatter',
            itemStyle: itemStyle,
            data: datajuan
        }
        
    ]
};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>